<template>
	<view>
		<navBar title="学习手册列表"></navBar>
		
		<view class="book">
			<view class="book-title">
				<text>{{book_title}}</text>
			</view>
			<view class="book-intro">
				<text>简介:{{book_intro}}</text>
			</view>
		</view>
		
		<view class="bookList">
			<view v-for="(item,index) in bookList" :key="item.sections_id" class="bookList-item" @click="toDetail(item.sections_id)">
				<u-section  sub-color="#82848a" :showLine="false" :title="item.title" sub-title="阅读"></u-section>
			</view>			
		</view>
		
	</view>
</template>

<script>
	import {getStudySectionsList} from '../../utils/study.js'
	
	export default {
		data() {
			return {
				book_id:'',
				book_title:'',
				book_intro:'',
				
				pageNum:1,
				pageSize:1000,
				bookList:[]
			};
		},
		methods:{
			async getStudyAbout(){
				let result = await getStudySectionsList(this.book_id,this.pageNum,this.pageSize)
				if(result.code === 200){
					this.bookList = result.data
				}
			},
			toDetail(id){
				uni.navigateTo({
					url:`/subpkg/studyDetail/studyDetail?id=${id}`
				})
			}
		},
		onLoad(option) {
			this.book_id = option.book_id
			this.book_title = option.title
			this.book_intro = option.intro
			this.getStudyAbout()
		}
	}
</script>

<style lang="scss" scoped>
.book{
	padding-top: 30rpx;
	width: 95%;
	margin: 0 auto;
	margin-bottom: 70rpx;
	
	.book-title{
		font-size: 42rpx;
		font-weight: bold;
		padding-bottom: 30rpx;
	}
	
	.book-intro{
		color: #82848a;
		font-size: 24rpx;
	}
}

.bookList{
	width: 90%;
	margin: 0 auto;
	padding-bottom: 30rpx;
	
	
	.bookList-item{
		padding: 30rpx 0;
		margin-bottom: 30rpx;
		background-color: #a0cfff;
		border-radius: 10px;
	}
}
</style>
